<template>
    <el-dialog :model-value="visible" :title="$t('menu.manageAuth')" width="800px" :before-close="cb=>cancelForm()">
        <el-row class="operate ">
            <el-button type="success" @click="showAddDialog">{{$t('data.button.add')}}</el-button>
            <el-button type="danger" @click="deleteConfirm" :disabled="selectData.length==0">{{$t('data.button.delete')}}</el-button>
            <el-alert :title="$t('data.tip.selected',{count:selectData.length})" type="warning" show-icon :closable='false' v-if="selectData.length>0"></el-alert>
        </el-row>
        <el-table ref="multipleTableRef" :data="tableData" height="400" border @selection-change="handleSelectionChange" v-loading="loading">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="privilegeCode" :label="$t('auth.privilegeCode')" />
            <el-table-column prop="privilegName" :label="$t('auth.privilegName')" />
            <el-table-column fixed="right" :label="$t('data.column.operate')">
                <template #default="scope">
                    <el-button type="text" @click="showEditDialog(scope.row)">{{$t('data.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-button @click="cancelForm()">{{$t('data.button.close')}}</el-button>
        </template>
    </el-dialog>
    <el-dialog :model-value="showDialog" :title="isAddDialog?$t('auth.addDialogTitle'):$t('auth.editDialogTitle')" width="500px" :before-close="cb=>closeAddDialog()">
        <el-form
            ref="userFormRef"
            :model="dialogForm"
            :rules="validateRules"
            label-width="100px"
        >
            <el-form-item :label="$t('auth.privilegeCode')" prop="privilegeCode">
                <el-input v-model="dialogForm.privilegeCode"></el-input>
            </el-form-item>
            <el-form-item :label="$t('auth.privilegName')" prop="privilegName">
                <el-input v-model="dialogForm.privilegName"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="closeAddDialog()" >{{$t('data.button.cancel')}}</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submitAddDialog('userFormRef')">{{$t('data.button.confirm')}}</el-button>
        </template>
    </el-dialog>
</template>
<script>
import menuApi from '@/api/menu'
export default {
    props:{
        menuId:{
            type:Number
        },
        visible:{
            type:Boolean,
            default:false
        },
    },
    emits:['submit','close'],
    data(){
        return{
            isSaveing:false,
            selectData:[],
            tableData:[],
            loading:false,
            showDialog:false,
            isAddDialog:false,
            dialogForm:{},
            validateRules:{
                privilegeCode:[
                    {
                        required: true,
                        message: '请输入权限编号',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                ],
                privilegName:[
                    {
                        required: true,
                        message: '请输入权限名称',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                ]
            }
        }
    },
    watch:{
        visible:function(){
            if(this.visible){
                this.selectData=[]                
                this.loading=true
                this.$nextTick().then(()=>{
                   this.$refs.multipleTableRef.clearSelection()
                   this.getTableList()
                })                
            }
        }
    },
    methods:{
        submitForm(){
            this.$emit('submit',this.selectData);
        },
        cancelForm(){
            this.$emit('close');
        },
        handleSelectionChange(data){
            console.log('handleSelectionChange',data)
            this.selectData=(data || []).map(a=>a.privilegeId);
        },
        getTableList(){
            return menuApi.getAuthByMenuId(this.menuId).then(d=>{
                this.loading=false
                if(!!d && d.code=='200'){
                    this.tableData=d.data || []
                }
            }).catch(()=>{
                this.loading=false
            })
        },
        showAddDialog(){
            this.showDialog=true;
            this.isAddDialog=true;
            this.dialogForm={}
        },
        closeAddDialog(){
            this.$refs['userFormRef'].resetFields()
            this.showDialog=false;
            this.dialogForm={}
        },
        submitAddDialog(){
            this.$refs['userFormRef'].validate(valid=>{
                if(valid){
                    this.addOrUpdateAuth(this.dialogForm);
                }
            })
        },
        addOrUpdateAuth(form){
            form.menuId=this.menuId
            if(this.isAddDialog){
                menuApi.addAuth(form).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.addSuccess'),
                            type: 'success',
                        })
                        this.closeAddDialog();
                        this.getTableList();
                    }
                })
            }
            else{
                menuApi.updateAuth(form).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.updateSuccess'),
                            type: 'success',
                        })
                        this.closeAddDialog();
                        this.getTableList();
                    }
                })
            }
        },
        showEditDialog(row){
            this.dialogForm={}
            menuApi.getAuth(row.privilegeId).then(d=>{
                if(!!d && d.code=='200'){
                    this.dialogForm=d.data || {}
                    this.isAddDialog=false;
                    this.showDialog=true;                    
                }
                else{
                    this.$message({
                        showClose: true,
                        message: this.$t('data.list.error'),
                        type: 'error',
                    })
                }
            })
        },
        deleteConfirm(){
            this.$messageBox.confirm(this.$t('data.confirm.delete'),this.$t('data.confirm.title'),{
                type: 'warning',
            })
            .then(() => {
                menuApi.deleteAuths(this.selectData.map(a=>a.privilegeId)).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.deleteSuccess'),
                            type: 'success',
                        })
                        this.getTableList();
                    }
                })
            })            
        },
    }
}
</script>